<!--
 * @Author: hu_binbin
 * @Date: 2021-06-15 10:43:24
 * @LastEditTime: 2021-08-19 14:32:01
 * @Description: 选择人员公共方法
-->

<template>
    <div id="selectPeoplePage">
        <!-- 头部导航 -->
        <Theader :title="title">
            <template slot="header_arrow">
                <van-icon @back="back" size="22" name="arrow-left" @click="back" />
            </template>
            <template slot="header_icon">
                <span style="color:#40C1AC;font-size:15px;" @click="confirmPerson">确认</span>
            </template>
        </Theader>
       <!-- 搜索区域-->
        <van-search style="margin-top: 46px;" v-model="selName" clearable @click="focus" background="#fff" placeholder="请选择人员">
        </van-search>

        <div class="mainPart">
            <div v-for="(org,i) of orgList" :key="i">
                <van-cell class="vanCell">
                    <template solt="icon">
                        <van-image @click="iconBtn(org)" :src="showIcon(org)" width="15" height="15"/>
                    </template>
                    <template solt="title">
                        <div class="cell-title" @click="iconBtn(org)">
                            <label>{{org.orgName}}</label>
                            <span v-show="org.result.length != 0">{{'('+ org.result.length +')'}}</span>
                        </div>
                    </template>
                    <template slot="default">
                        <span class="tile-right" @click="selAllTeam(org)" style="color:#61C0B2;">全选</span>
                    </template>
                </van-cell>
                <div v-show="org.arrowclass != 'xia'">
                    <van-checkbox-group v-model="org.result">
                        <van-cell v-for="(user,index) of org.memberList" class="perList" :key="index">
                            <template solt="icon">
                                <!-- <van-image src="" width="24" height="24"/> -->
                                <van-icon style="margin-left:0.5rem" size="24" name="friends-o" />
                            </template>
                            <template solt="title">
                                <div class="perList-title">
                                    <div>{{user.userName}}</div>
                                    <div style="color:#999;">工作班成员</div>
                                </div>
                            </template>
                            <template slot="default">
                                <div class="perList-right" @click="selOneTeam(user)">
                                    <van-checkbox checked-color="#17B49B" :name="user.userId"/>
                                </div>
                            </template>
                        </van-cell>
                    </van-checkbox-group>
                </div>
            </div>
        </div>

        <!-- 已选择区域 -->
        <div class="hasSelectPart">
            <div class="selPer-title">
                <van-icon size="16" name="user-circle-o" />
                <span style="margin-left:0.1rem;">已选择</span>
            </div>
            <div class="selPer-cont">
                <div v-for="(item,i) of selectedpeople" :key="i" class="selPer-item">{{item.userName}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
const PinyinEngine = require('pinyin-engine');
import Theader from "./header"
export default {
    name: "SelectPeople",
    components:{
        Theader
    },
    props: {
        // 是否显示人员所在全部班组或仅当前登录班组
        // （true:全部班组，false:仅当前登录班组）
        isAllOrg: {
            type: Boolean,
            default() {
                return false
            }
        },
        // 单选还是多选(true:多选，false:单选)
        selectMore: {
            type: Boolean,
            default() {
                return true
            }
        },
        // 是否只能选择一个班组下的人员
        // (true:只能选一个班组下的成员，false:可跨班组)
        selectOneOrg: { 
            type: Boolean,
            default() {
                return false
            }
        },
        // 已选中的班组人员
        selectedArr: { 
            type: Array,
            default() {
                return []
            }
        },
        // 需要去除的班组人员
        removeArr: { 
            type: Array,
            default() {
                return []
            }
        },
    },
    data() {
        return {
            title: "选择人员",
            selName:'',
            userInfo:{},            // 用户信息
            orgId: "",              // 班组id
            orgList:[
                {
                    checkAll: false, 
                    orgName: "变电运维一班",
                    orgId: "001",
                    result:[],
                    arrowclass: "xia",
                    memberList: [
                        {
                            checked: false,
                            userName: "宋云飞",
                            userId: "0010"
                        },
                        {
                            checked: false,
                            userName: "摄于",
                            userId: "0011"
                        }
                    ]
                },
                {
                    checkAll: false, 
                    orgName: "变电运维二班",
                    orgId: "002",
                    result:[],
                    arrowclass: "xia",
                    memberList: [
                        {
                            checked: false,
                            userName: "宋云",
                            userId: "0021"
                        },
                        {
                            checked: false,
                            userName: "云飞",
                            userId: "0022"
                        }
                    ]
                },
                {
                    checkAll: false, 
                    orgName: "变电运维三班",
                    orgId: "003",
                    result:[],
                    arrowclass: "xia",
                    memberList: [
                        {
                            checked: false,
                            userName: "李云龙",
                            userId: "0031"
                        },
                        {
                            checked: false,
                            userName: "萧炎",
                            userId: "0032"
                        }
                    ]
                },
            ],             // 人员列表
            icon: {
                xia: require("../../../../assets/tour/xia.png"),
                shang:require("../../../../assets/tour/shang.png"),
            }
        };
    },
    computed: {
        selectedpeople() {
            var selResult = [];
            this.orgList.forEach(org => {
                if(org.result.length != 0) {
                    org.memberList.forEach(user => {
                        if(org.result.indexOf(user.userId) != -1) {
                            selResult.push(user);
                        }
                    })
                }
            })
            return selResult;
        },
        showIcon() {
            return function (item) {
                if(item.arrowclass == "xia") {
                    return this.icon.xia
                }else{
                    return this.icon.shang
                }
            }
        }
    },
    methods: {
        focus() {
            
        },
        //上下图标显示
        iconBtn(item) {
            item.arrowclass = item.arrowclass == "xia" ? "shang":"xia";
        },
        /**
         * @description: 展开或隐藏当前点击的班组成员
         * @param {Number} i 要展开或隐藏的班组索引
         */ 
        openOrHidegroup(i){
            if(this.orgList[i].arrowclass == "xia"){
                this.orgList[i].arrowclass = "shang"
            }else{
                this.orgList[i].arrowclass = "xia"
            }
        },
        //选择班组下全部成员
        selAllTeam(org) {
            if(org.result.length == org.memberList.length) {
                org.result = [];
            }else{
                org.result = org.memberList.map(item => item.userId)
            }
            
        },
        //选着班组单个成员
        selOneTeam() {

        },
        /**
         * @description: 返回
         */ 
        back(){
            console.log("返回");
            this.$emit("comfirmPerson")
        },

        /**
         * @description: 确定选择人员
         */ 
        confirmPerson(){
            console.log("确定选择人员");
            if(this.selectedpeople.length == 0){
                this.$toast("请选择人员");
                return
            }
            console.log("this.selectedpeople===",this.selectedpeople)
            this.$emit("comfirmPerson",this.selectedpeople)
        },

        /**
         * @description: 获取班组成员
         */ 
        getPeopleList() {
            var self = this;
            var params = {
                keyword: this.selName,//人员名称
                roleCode: "",
                teamId: "",
                userId: "",
            };
            this.$toast.loading({
                duration: 0,//展示时长 0不会消失
                message: "加载中人员...",
                forbidClick: true,//是否禁止背景点击
                overlay: true//是否显示背景遮罩层
            })
			console.log("params",params)
            getUserList(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    var selPerson = data.data;
                    console.log("selPerson",selPerson)
                    if(selPerson && selPerson.length > 0) {
                        
                    }else{
                        
                    }
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.fail(err)
            })
        },
    },
    mounted() {
        //this.getPeopleList()
    }
};
</script>

<style scoped>
#selectPeoplePage {
    width: 100%;
    height: 100%;
    font-size: 14px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: #F0F0F0;
    text-align: left;
    z-index: 9999;
}
.hasSelectPart {
    background:#fff;
    display:flex;
    position: fixed;
    bottom: 0px;
    font-size: 13px;
    padding: 0.5rem;
    width: calc(100% - 1rem);
    align-items: baseline;

}
.hasSelectPart .selPer-title{
    display:flex;
    color:#999;
    align-items:center;
    width:20%
}
.hasSelectPart .selPer-cont{
    display:flex;
    flex:1;
    color:#61C0B2;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.hasSelectPart .selPer-item{
    margin:0.3rem;
    padding:0.3rem;
    width: 16%;
    text-align: center;
    background:#F6F6F6;
}

/* 主体区域 */
.mainPart {
    height:calc(100% - 200px);
    overflow-y: auto;
}
.vanCell .van-cell__value{
    display: flex;
    align-items: center;
}
.vanCell .cell-title{
    width: 50%;
    margin-left: 0.5rem;
}
.vanCell .tile-right{
    flex:1;
    text-align:right;
}

.perList .van-cell__value{
    display: flex;
    align-items: center;
}
.perList .perList-title{
    width: 50%;
    margin-left: 0.5rem;
}
.perList .perList-right{
    flex:1;
    display: flex;
    justify-content: flex-end;
}
</style>
